import React, { useEffect, useState } from "react";
import { useLocation } from "react-router-dom"
import { DetailContainer } from "./detail.style"
import DetailRotation from "../../../components/main/detailRotation/DetailRotation"
import CardText from "@/components/main/cardtext/CardText"
import Scroll from '@/baseUI/scroll'
import ProductsRecommend from "@/components/main/productsRrcommend/ProductsRecommend"
import ProductsPicture from "@/components/main/productsPicture/ProductsPicture"
import { useNavigate } from "react-router-dom"
import ShopcarTable from "../../../components/main/shopcarTable/ShopcarTable"

const Detail = () => {
    let location = useLocation();
    let navigate = useNavigate();
    let datas = location.state;
    // console.log(datas.datas.prc);

    let [shopcarDisplay, setShopcarDisplay] = useState(0);
    // const [goto , setGoto] = useState()
    console.log(shopcarDisplay);
    const prc = datas.datas.prc;
    // console.log(prc)
    const { imgLists = [], longpic, productSize = [] } = datas.datas.details;
    console.log(productSize, "---------");
    // console.log(imgLists[0], "---------")
    const gohome = () => {
        navigate(-1);
    }
    const goShopcar = () => {
        navigate("/home/shopcar");
    }
    return (
        <DetailContainer>
            <div className="navbar">
                <div className="navbar_left" onClick={gohome}><svg t="1642057754552" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1378" width="200" height="200"><path d="M727.28171457 968.45419457l78.06065778-69.77561284a1.16508445 1.16508445 0 0 0 0-1.68289976L375.94402765 513.4239921a1.16508445 1.16508445 0 0 1 0-1.68289975l429.3983447-383.70114371a1.16508445 1.16508445 0 0 0 0-1.68289975l-78.06065778-69.77561284a1.16508445 1.16508445 0 0 0-1.55344593 0L214.90346667 510.05819259a1.16508445 1.16508445 0 0 0 0 1.68289976 1.16508445 1.16508445 0 0 1 0 1.68289975 1.16508445 1.16508445 0 0 0 0 1.68289975l510.82480197 453.34730272a1.16508445 1.16508445 0 0 0 1.55344593 0z" fill="#888888" p-id="1379"></path></svg></div>
                <div className="navbar_mid">商品详情</div>
                <div className="navbar_right"><svg t="1642058749735" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8303" width="200" height="200"><path d="M972.8 549.9136v294.7584A128.0768 128.0768 0 0 1 844.8 972.8H179.2a128 128 0 0 1-128-128V179.2c0-70.7328 57.1904-128 127.872-128h202.3168a25.6 25.6 0 0 0 0-51.2H179.072A179.072 179.072 0 0 0 0 179.2v665.6a179.2 179.2 0 0 0 179.2 179.2h665.6c98.944 0 179.2-80.2816 179.2-179.328V549.9136a25.6 25.6 0 0 0-51.2 0z" p-id="8304"></path><path d="M960 128c-353.4592 0-640 286.5408-640 640a25.6 25.6 0 0 0 51.2 0c0-325.1968 263.6032-588.8 588.8-588.8a25.6 25.6 0 0 0 0-51.2z" p-id="8305"></path><path d="M720.1024 62.1568l256 102.4a25.6 25.6 0 0 0 18.9952-47.5136l-256-102.4a25.6 25.6 0 0 0-18.9952 47.5136z" p-id="8306"></path><path d="M808.8064 348.4672l194.6368-189.312a25.6 25.6 0 1 0-35.6864-36.7104L773.12 311.7568a25.6 25.6 0 1 0 35.6864 36.7104z" p-id="8307"></path></svg></div>
            </div>

            <Scroll
                className="scroll"
                direction={'vertical'}
                refresh={false}
            >
                <div className="detailContainer">
                    <DetailRotation rotationImg={imgLists} />
                    <CardText datas={datas} setShopcarDisplay={setShopcarDisplay} />
                    <ProductsRecommend />
                    <ProductsPicture image={longpic} />
                </div>
            </Scroll>


            <div className="titlebar">
                <div className="homepage" onClick={gohome}>
                    <svg t="1642063736033" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6532" width="200" height="200"><path d="M98.033 480.211c-10.115 0-20.065-4.783-26.285-13.712-10.102-14.501-6.536-34.446 7.966-44.548l414.033-288.425a32.003 32.003 0 0 1 37.505 0.667l384.137 288.424c14.133 10.612 16.987 30.671 6.376 44.804s-30.67 16.988-44.804 6.375L511.335 199.272l-395.04 275.193a31.845 31.845 0 0 1-18.262 5.746zM831.241 927.64H608.515c-17.673 0-32-14.327-32-32V671.965H448.118V895.64c0 17.673-14.327 32-32 32H188.589c-17.673 0-32-14.327-32-32V513.167c0-17.673 14.327-32 32-32s32 14.327 32 32V863.64h163.529V639.965c0-17.673 14.327-32 32-32h192.397c17.673 0 32 14.327 32 32V863.64h158.727V513.167c0-17.673 14.327-32 32-32s32 14.327 32 32V895.64c-0.001 17.672-14.328 32-32.001 32z" fill="#2e3749" p-id="6533"></path></svg>
                    <div className="home">首页</div>
                </div>
                <div className="shopcar" onClick={goShopcar}>
                    <svg t="1642063781315" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7622" width="200" height="200"><path d="M979.584 264.448c-10.368-12.928-26.24-20.352-43.52-20.352L231.168 244.096l-42.368-172.8c-3.072-12.672-14.592-21.632-27.648-21.632L61.568 49.664c-15.744 0-28.416 12.8-28.416 28.416s12.8 28.416 28.416 28.416l77.312 0 159.744 651.392c-41.088 16.768-70.144 57.088-70.144 104.064 0 61.952 50.432 112.384 112.384 112.384s112.384-50.432 112.384-112.384c0-20.096-5.376-39.04-14.72-55.424l184.576 0c-9.344 16.384-14.72 35.328-14.72 55.424 0 61.952 50.432 112.384 112.384 112.384 61.952 0 112.384-50.432 112.384-112.384 0-61.952-50.432-112.384-112.384-112.384-0.512 0-1.152 0-1.664 0-0.256 0-0.64 0-0.896 0L355.2 749.568l-15.872-64.64 467.712 0c23.296 0 44.032-14.08 51.456-34.56l129.024-336.64c0-0.128 0-0.128 0.128-0.256 0.128-0.256 0.128-0.384 0.256-0.64C993.792 296.32 990.72 278.272 979.584 264.448zM396.288 861.952c0 30.592-24.832 55.424-55.424 55.424S285.44 892.544 285.44 861.952c0-30.592 24.832-55.424 55.424-55.424C371.456 806.528 396.288 831.488 396.288 861.952zM720.768 917.504c-30.592 0-55.424-24.832-55.424-55.424 0-30.592 24.832-55.424 55.424-55.424 30.592 0 55.424 24.832 55.424 55.424C776.192 892.544 751.36 917.504 720.768 917.504zM806.272 628.096 325.376 628.096l-80.256-327.04 686.464 0L806.272 628.096z" p-id="7623" fill="#2b3547"></path><path d="M380.032 429.056l375.68 0c15.744 0 28.416-12.8 28.416-28.416s-12.8-28.416-28.416-28.416L380.032 372.224c-15.744 0-28.416 12.8-28.416 28.416S364.288 429.056 380.032 429.056z" p-id="7624" fill="#2b3547"></path><path d="M722.944 500.096 412.8 500.096c-15.744 0-28.416 12.8-28.416 28.416 0 15.744 12.8 28.416 28.416 28.416l310.144 0c15.744 0 28.416-12.8 28.416-28.416C751.36 512.768 738.56 500.096 722.944 500.096z" p-id="7625" fill="#2b3547"></path></svg>
                    <div className="shop">购物车</div>
                </div>
                <div className="buttontotal">
                    <div className="buttonleft" onClick={() => setShopcarDisplay(1)} >加入购物车</div>
                    <div className="buttonright" onClick={() => setShopcarDisplay(2)} >立刻购买</div>
                </div>
            </div>

            {
                // 需要复用到购物车之中
                shopcarDisplay ? <ShopcarTable datas={datas} setShopcarDisplay={setShopcarDisplay} shopcarDisplay={shopcarDisplay} /> : null
            }

        </DetailContainer >
    )
}
export default Detail